// 屏蔽浏览器差异
require("../../public/css/normalize.css")
require("../../public/css/common.css")

// 当前页面样式
require("./shopping_cart.less")

window.addEventListener("DOMContentLoaded", () => {
    let headerTitle = document.querySelector(".header-title")
    let lt = document.querySelector(".lt")
    window.addEventListener("scroll", function () {
        if (window.scrollY >= 1) {
            headerTitle.style.display = "block"
            lt.style.color = "black"
        } else {
            headerTitle.style.display = "none"
            // lt.style.color = "#fff"
        }
    })
    dataList =
        [
            { "class": "menu", "menuImg": "8.png", "name": "肥猫闹钟", "desc": "时钟、温湿度计、一物多用", "dsj": "到手价", "qfh": "￥", "qxj": "69", "qyj": "￥99", "img1": "shmy.png" },
            { "class": "menu", "menuImg": "8.png", "name": "蓝牙版HUD", "desc": "开车不低头，导航动动嘴", "dsj": "到手价", "qfh": "￥", "qxj": "359", "qyj": "￥499", "img1": "uphyzsz.png", "img2": "8.png" },
            { "class": "menu", "menuImg": "8.png", "name": "肥猫闹钟", "desc": "时钟、温湿度计、一物多用", "dsj": "到手价", "qfh": "￥", "qxj": "69", "qyj": "￥99", "img1": "shmy.png" },
            { "class": "menu", "menuImg": "8.png", "name": "蓝牙版HUD", "desc": "开车不低头，导航动动嘴", "dsj": "到手价", "qfh": "￥", "qxj": "359", "qyj": "￥499", "img1": "uphyzsz.png", "img2": "15tbj.png" },
            { "class": "menu", "menuImg": "8.png", "name": "肥猫闹钟", "desc": "时钟、温湿度计、一物多用", "dsj": "到手价", "qfh": "￥", "qxj": "69", "qyj": "￥99", "img1": "shmy.png" },
            { "class": "menu", "menuImg": "8.png", "name": "蓝牙版HUD", "desc": "开车不低头，导航动动嘴", "dsj": "到手价", "qfh": "￥", "qxj": "359", "qyj": "￥499", "img1": "uphyzsz.png", "img2": "15tbj.png" },
            { "class": "menu", "menuImg": "8.png", "name": "肥猫闹钟", "desc": "时钟、温湿度计、一物多用", "dsj": "到手价", "qfh": "￥", "qxj": "69", "qyj": "￥99", "img1": "shmy.png" },
            { "class": "menu", "menuImg": "8.png", "name": "蓝牙版HUD", "desc": "开车不低头，导航动动嘴", "dsj": "到手价", "qfh": "￥", "qxj": "359", "qyj": "￥499", "img1": "uphyzsz.png", "img2": "15tbj.png" },
            { "class": "menu", "menuImg": "8.png", "name": "肥猫闹钟", "desc": "时钟、温湿度计、一物多用", "dsj": "到手价", "qfh": "￥", "qxj": "69", "qyj": "￥99", "img1": "shmy.png" },
            { "class": "menu", "menuImg": "8.png", "name": "蓝牙版HUD", "desc": "开车不低头，导航动动嘴", "dsj": "到手价", "qfh": "￥", "qxj": "359", "qyj": "￥499", "img1": "uphyzsz.png", "img2": "15tbj.png" },
            { "class": "menu", "menuImg": "8.png", "name": "肥猫闹钟", "desc": "时钟、温湿度计、一物多用", "dsj": "到手价", "qfh": "￥", "qxj": "69", "qyj": "￥99", "img1": "shmy.png" },
            { "class": "menu", "menuImg": "8.png", "name": "蓝牙版HUD", "desc": "开车不低头，导航动动嘴", "dsj": "到手价", "qfh": "￥", "qxj": "359", "qyj": "￥499", "img1": "uphyzsz.png", "img2": "15tbj.png" },
            { "class": "menu", "menuImg": "8.png", "name": "肥猫闹钟", "desc": "时钟、温湿度计、一物多用", "dsj": "到手价", "qfh": "￥", "qxj": "69", "qyj": "￥99", "img1": "shmy.png" },
            { "class": "menu", "menuImg": "8.png", "name": "蓝牙版HUD", "desc": "开车不低头，导航动动嘴", "dsj": "到手价", "qfh": "￥", "qxj": "359", "qyj": "￥499", "img1": "uphyzsz.png", "img2": "15tbj.png" },
            { "class": "menu", "menuImg": "8.png", "name": "肥猫闹钟", "desc": "时钟、温湿度计、一物多用", "dsj": "到手价", "qfh": "￥", "qxj": "69", "qyj": "￥99", "img1": "shmy.png" },
            { "class": "menu", "menuImg": "8.png", "name": "蓝牙版HUD", "desc": "开车不低头，导航动动嘴", "dsj": "到手价", "qfh": "￥", "qxj": "359", "qyj": "￥499", "img1": "uphyzsz.png", "img2": "15tbj.png" },
            { "class": "menu", "menuImg": "8.png", "name": "肥猫闹钟", "desc": "时钟、温湿度计、一物多用", "dsj": "到手价", "qfh": "￥", "qxj": "69", "qyj": "￥99", "img1": "shmy.png" },
            { "class": "menu", "menuImg": "8.png", "name": "蓝牙版HUD", "desc": "开车不低头，导航动动嘴", "dsj": "到手价", "qfh": "￥", "qxj": "359", "qyj": "￥499", "img1": "uphyzsz.png", "img2": "15tbj.png" },
        ]
    let menu = ""
    dataList.forEach(function (v) {
        menu += `<li class="menu">
        <img class="menu-img" src="../imgs${v.menuImg}" alt="">
        <div class="sub-menu">
            <h4>${v.name}</h4>
            <p>${v.desc}</p>
            <div class="dsj">${v.dsj}
                <span class="qfh">${v.qfh}<span class="qxj">${v.qxj}</span>&nbsp;<span class="qyj">${v.qyj}</span></span>
            </div>
            <img src="../imgs/${v.img1}" alt="">
            <img src="../imgs/${v.img2}" alt="">
        </div>
    </li>
             `
    })
    document.querySelector(".cnxh-box").innerHTML += menu;

})
